<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Test</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="css/dashboard.css" rel="stylesheet">
  <script src="js/jquery.js"></script>
</head>

<body>

  <header class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">疫情打卡管理系统</a>
    <button class="navbar-toggler position-absolute d-md-none" type="button" data-bs-toggle="collapse"
      data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="w-100"></div>
    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link text-white" href="#">退出系统</a>
      </li>
    </ul>
  </header>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <button class="nav-link" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
              type="button" role="tab" aria-controls="v-pills-home" aria-selected="false">
              <span data-feather="home"></span>
              主页
            </button>
            <button class="nav-link" id="unfinished-query-tab" data-bs-toggle="pill" data-bs-target="#unfinished-query"
              type="button" role="tab" aria-controls="unfinished-query" aria-selected="false">
              <span data-feather="file-text"></span>
              未打卡查询
            </button>
            <button class="nav-link" id="done-query-tab" data-bs-toggle="pill" data-bs-target="#done-query"
              type="button" role="tab" aria-controls="done-query" aria-selected="false">
              <span data-feather="file-text"></span>
              记录查询
            </button>
            <button class="nav-link active" id="v-pills-users-tab" data-bs-toggle="pill" data-bs-target="#v-pills-users"
              type="button" role="tab" aria-controls="v-pills-users" aria-selected="true">
              <span data-feather="users"></span>
              用户管理
            </button>
            <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings"
              type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
          </div>

        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 tab-content">
        <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">统计概况</h1>
            <!-- <div class="btn-toolbar mb-2 mb-md-0">
              <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
              </div>
              <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
                <span data-feather="calendar"></span>
                This week
              </button>
            </div> -->
          </div>
          <div class="row">
            <div class="mb-3 col-lg-6">
              <h3 class="mb-0">今天各学院的打卡人数</h3>
              <canvas class="my-4 w-100" id="chart1" aria-label="Hello ARIA World" role="img"></canvas>
            </div>
            <div class="mb-3 col-lg-6">
              <h3 class="mb-0">昨天各学院未打卡的人数</h3>
              <canvas class="my-4 w-100" id="chart2" aria-label="Hello ARIA World" role="img"></canvas>
            </div>
            <div class="mb-3 col-lg-6">
              <h3 class="mb-0">上一周未打卡人数变化</h3>
              <canvas class="my-4 w-100" id="chart3" aria-label="Hello ARIA World" role="img"></canvas>
            </div>
            <div class="mb-3 col-lg-6">
              <h3 class="mb-0">图</h3>
              <canvas class="my-4 w-100" id="chart4" aria-label="Hello ARIA World" role="img"></canvas>
            </div>
          </div>



        </div>

        <div class="tab-pane fade" id="unfinished-query" role="tabpanel" aria-labelledby="unfinished-query-tab">

          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">未打卡人员查询</h1>
            <button id="unfinishedQueryButton" type="button" class="btn btn-sm btn-outline-primary">查 询</button>
          </div>

          <form id="unfinishedQueryForm" class="row">
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">学号</span>
              <input name="username" type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">姓名</span>
              <input name='name' type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">学院</span>
              <select name="department" class="form-select">
                <option value="">请选择</option>
                <option value="机械工程学院">机械工程学院</option>
                <option value="计算机科学与技术学院">计算机科学与技术学院</option>
                <option value="经济与管理学院">经济与管理学院</option>
                <option value="文学与传媒学院">文学与传媒学院</option>
                <option value="网络空间安全学院">网络空间安全学院</option>
              </select>
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">专业</span>
              <input name='clazz' type="text" class="form-control">
            </div>
            

          </form>

          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">查询结果</h1>
            <button id="unfinishedExportButton" type="button" class="btn btn-sm btn-outline-primary">导出为Excel</button>
          </div>


          <div id='unfinishedQueryTableContainer' class="table-responsive d-none">
            <!-- <table class="table table-striped table-sm table-hover tab-content">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">学号</th>
                  <th scope="col">姓名</th>
                  <th scope="col">班级</th>
                  <th scope="col">日期</th>
                  <th scope="col">字段</th>
                  <th scope="col">字段</th>
                </tr>
              </thead>
              <tbody class='tab-pane fade show active' id="page-1" role="tabpanel" aria-labelledby="page-1-tab">
                <tr>
                  <th scope="row"></th>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                </tr>
              </tbody>
            </table>
            <nav>
              <div id='page-nav' class="nav nav-tabs justify-content-center" role="tablist">
                <button type="button" class="btn btn-outline-primary active" id="page-1-tab" data-bs-toggle="tab"
                  data-bs-target="#page-1" role="tab" aria-controls="page-1" aria-selected="true">1</button>
                <button type="button" class="btn btn-outline-primary" id="page-2-tab" data-bs-toggle="tab"
                  data-bs-target="#page-2" role="tab" aria-controls="page-2" aria-selected="false">2</button>
                <button type="button" class="btn btn-outline-primary" id="page-3-tab" data-bs-toggle="tab"
                  data-bs-target="#page-3" role="tab" aria-controls="page-3" aria-selected="false">3</button>
                <button type="button" class="btn btn-outline-primary" id="page-4-tab" data-bs-toggle="tab"
                  data-bs-target="#page-4" role="tab" aria-controls="page-4" aria-selected="false">4</button>
              </div>
            </nav> -->
          </div>

        </div>

        <div class="tab-pane fade" id="done-query" role="tabpanel" aria-labelledby="done-query-tab">
          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">综合查询</h1>
            <button id="doneQueryButton" type="button" class="btn btn-sm btn-outline-primary">查 询</button>
          </div>

          <form id="doneQueryForm" class="row">
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">学号</span>
              <input name='username' type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">所在地址</span>
              <input name="address" type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">身体状况</span>
              <select name="condition" class="form-select">
                <option value="">请选择</option>
                <option value="2-1">良好</option>
                <option value="2-1">异常</option>
              </select>
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">是否到达重点地区</span>
              <select name="isArea" class="form-select">
                <option value="">请选择</option>
                <option value="3-1">否</option>
                <option value="3-2">是</option>
              </select>
            </div>
            <div class="d-flex mb-3 col-lg-6">
              <span class="input-group-text">曾途径的重点地区</span>
              <input name="area" type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">是否为重点人群</span>
              <select name="isArea" class="form-select">
                <option value="">请选择</option>
                <option value="4-1">否</option>
                <option value="4-2">是</option>
              </select>
            </div>
            <div class="d-flex mb-3 col-sm-6 col-lg-3">
              <span class="input-group-text">备注</span>
              <input name='remark' type="text" class="form-control">
            </div>
            <div class="d-flex mb-3 col-lg-6">
              <span class="input-group-text">体温</span>
              <input name='minTemperature' type="number" min='35' max='43' step='0.1' class="form-control">
              <span class="input-group-text">至</span>
              <input name='maxTemperature' type="number" min='35' max='43' step='0.1' class="form-control">
              <span class="input-group-text">℃</span>
            </div>
            <div class="d-flex mb-3 col-lg-6">
              <span class="input-group-text">日期</span>
              <input name='minDate' type="date" class="form-control">
              <span class="input-group-text">至</span>
              <input name='maxDate' type="date" class="form-control">
            </div>

          </form>

          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">查询结果</h1>
            <button id="doneExportButton" type="button" class="btn btn-sm btn-outline-primary">导出为Excel</button>
          </div>
          <div id='doneQueryTableContainer' class="table-responsive d-none">
  
          </div>
        </div>
        

        <div class="tab-pane fade  show active" id="v-pills-users" role="tabpanel" aria-labelledby="v-pills-users-tab">
          <div
            class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">管理员列表</h1>
          </div>

          <div id='adminTableContainer' class="table-responsive">
            
          </div>

          <div
          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">用户列表</h1>
        </div>
        <div id='usersTableContainer' class="table-responsive">
      
        </div>


        </div>
      </main>
    </div>
  </div>


  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
    integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"
    integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="js/dashboard.js"></script>
</body>

</html>